import { ref, onMounted, onUnmounted } from 'vue'

// 响应式设计 composable
export function useResponsive() {
  const windowWidth = ref(window.innerWidth)
  const windowHeight = ref(window.innerHeight)

  // 断点定义
  const breakpoints = {
    xs: 480,
    sm: 768,
    md: 1024,
    lg: 1280,
    xl: 1920,
  }

  // 设备类型判断
  const isMobile = ref(windowWidth.value < breakpoints.sm)
  const isTablet = ref(windowWidth.value >= breakpoints.sm && windowWidth.value < breakpoints.lg)
  const isDesktop = ref(windowWidth.value >= breakpoints.lg)

  // 屏幕尺寸分类
  const isXs = ref(windowWidth.value < breakpoints.xs)
  const isSm = ref(windowWidth.value >= breakpoints.xs && windowWidth.value < breakpoints.sm)
  const isMd = ref(windowWidth.value >= breakpoints.sm && windowWidth.value < breakpoints.md)
  const isLg = ref(windowWidth.value >= breakpoints.md && windowWidth.value < breakpoints.lg)
  const isXl = ref(windowWidth.value >= breakpoints.lg)

  // 更新响应式状态
  const updateResponsiveState = () => {
    windowWidth.value = window.innerWidth
    windowHeight.value = window.innerHeight

    isMobile.value = windowWidth.value < breakpoints.sm
    isTablet.value = windowWidth.value >= breakpoints.sm && windowWidth.value < breakpoints.lg
    isDesktop.value = windowWidth.value >= breakpoints.lg

    isXs.value = windowWidth.value < breakpoints.xs
    isSm.value = windowWidth.value >= breakpoints.xs && windowWidth.value < breakpoints.sm
    isMd.value = windowWidth.value >= breakpoints.sm && windowWidth.value < breakpoints.md
    isLg.value = windowWidth.value >= breakpoints.md && windowWidth.value < breakpoints.lg
    isXl.value = windowWidth.value >= breakpoints.lg
  }

  // 监听窗口大小变化
  const handleResize = () => {
    updateResponsiveState()
  }

  onMounted(() => {
    window.addEventListener('resize', handleResize)
    updateResponsiveState()
  })

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
  })

  return {
    windowWidth,
    windowHeight,
    isMobile,
    isTablet,
    isDesktop,
    isXs,
    isSm,
    isMd,
    isLg,
    isXl,
    breakpoints,
  }
}
